<template>
	<view class="login-page">
		<!-- 登录主内容 -->
		<view class="login-container">
			<!-- 品牌Logo区域 -->
			<view class="logo-wrapper">
				<uni-icons type="contact" size="80" color="#07c160" class="logo-icon"></uni-icons>
			</view>

			<!-- 标题 -->
			<view class="title-group">
				<view class="main-title">绑定手机号登录</view>
				<view class="sub-title">绑定后可使用完整服务功能</view>
			</view>

			<!-- 微信手机号登录按钮 -->
			<button class="login-btn" :disabled="!isAgree" open-type="getPhoneNumber"
				@getphonenumber="handleGetPhoneNumber">
				<view class="btn-content">
					<uni-icons type="phone" size="22" :color="isAgree ? '#fff' : '#06b358'"
						class="phone-icon"></uni-icons>
					<view>手机号一键登录</view>
				</view>
			</button>

			<!-- 协议勾选 -->
			<view class="agreement-check">
				<uni-icons class="check-icon" :type="isAgree ? 'checkbox-filled' : 'checkbox'"
					:color="isAgree ? '#07c160' : '#ccc'" @click="toggleAgree" size="22"></uni-icons>
				<view class="agreement-text">
					我已阅读并同意
					<view class="link" @click="navigateToAgreement('service')">《用户服务协议》</view>
					和
					<view class="link" @click="navigateToAgreement('privacy')">《隐私政策》</view>
				</view>
			</view>
		</view>

		<!-- 底部版权信息 -->
		<view class="footer">
			<text class="copyright">© 2025黄冈科技职业学院版权所有</text>
		</view>
	</view>
</template>

<script setup>
	// 保持原有脚本逻辑不变
	import {
		ref
	} from 'vue'
	import {
		userLogin
	} from '@/services/base.js'
	const isAgree = ref(false)

	const toggleAgree = () => {
		isAgree.value = !isAgree.value
	}

	const navigateToAgreement = (type) => {
		uni.navigateTo({
			url: `/pages/login/agreement?type=${type}`
		})
	}

	const handleGetPhoneNumber = async (e) => {
		if (!isAgree.value) {
			uni.showToast({
				title: '请先同意用户协议和隐私政策',
				icon: 'none'
			})
			return
		}
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {
			uni.showToast({
				title: '请允许获取手机号以完成登录',
				icon: 'none'
			})
			return
		}
		try {
			uni.login({
				provider: 'weixin',
				async success(loginData) {
					const user = await userLogin({
						openIdCode: loginData.code,
						phoneCode: e.detail.code
					})
					if (user.code == 200) {
						const {
							token,
							...userConfig
						} = user.data
						uni.setStorageSync('userConfig', userConfig)
						uni.setStorageSync('token', token)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						uni.showToast({
							title: '登录失败请重试!',
							icon: 'none'
						})
					}
				},
				fail() {
					uni.showToast({
						title: '手机号登录失败，请重试!',
						icon: 'none'
					})
				}
			})
		} catch (err) {
			uni.showToast({
				title: '网络错误，请稍后重试',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		min-height: 100vh;
		background-color: #f7f9fa;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	.login-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 60rpx;
		padding-top: 120rpx;
		position: relative;
		z-index: 2;

		// Logo区域
		.logo-wrapper {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.15);
			margin-bottom: 40rpx;
		}
	}

	/* 标题样式优化 */
	.title-group {
		text-align: center;
		margin-bottom: 20rpx;

		.main-title {
			font-size: 38rpx;
			font-weight: 600;
			color: #1a1a1a;
			margin-bottom: 16rpx;
			letter-spacing: 1rpx;
		}

		.sub-title {
			font-size: 26rpx;
			color: #666;
			line-height: 1.5;
			margin: 0 auto;
		}
	}

	/* 登录按钮样式优化 */
	.login-btn {
		width: 100%;
		height: 96rpx;
		border-radius: 48rpx;
		background-color: #07c160;
		color: #fff;
		border: 1px solid #07c160;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		box-shadow: 0 6rpx 16rpx rgba(7, 193, 96, 0.25);
		transition: all 0.3s ease;
		margin-top: 20rpx;

		&:active {
			background-color: #06b358;
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2);
		}

		&[disabled] {
			background-color: #e8f5e9;
			color: #06b358;
			box-shadow: none;
		}

		.btn-content {
			display: flex;
			align-items: center;

			.phone-icon {
				margin-right: 15rpx;
			}
		}
	}

	/* 协议勾选样式优化 */
	.agreement-check {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		font-size: 24rpx;
		color: #888;
		margin-top: 40rpx;
		line-height: 1.4;
		padding: 0 20rpx;

		.check-icon {
			font-size: 28rpx;
			cursor: pointer;
			transition: color 0.2s ease;
		}

		.link {
			color: #07c160;
			text-decoration: underline;
			padding: 0 4rpx;
			cursor: pointer;
			display: inline;
			transition: color 0.2s ease;

			&:hover {
				color: #06b358;
			}
		}
	}

	/* 底部版权信息 */
	.footer {
		padding: 30rpx 0;
		text-align: center;
		position: relative;
		z-index: 2;

		.copyright {
			font-size: 22rpx;
			color: #aaa;
		}
	}
</style>